<template>
  <!-- 原始的登录页面 -->
  <div id="main">
    <div id="container">
      <div class="head">
        <div id="ITLogo">
          <img src="../assets/img/IT_white.png" alt="" />
          <span id="title">SICNU · IT培优</span>
        </div>
        <div v-if="!isReset" @click="toLogin" class="button">登录</div>
        <div v-if="!isReset" @click="toRegister" class="button">注册</div>
      </div>
      <Login class="logCard" v-if="isLogin && !isReset" @to-forget="toForget" />
      <ForgetPassword
        class="logCard"
        v-if="!isLogin && !isReset"
        @to-login="toLogin"
      />
      <ResetPasword class="logCard" v-if="isReset" :token="token" />
    </div>
    <div v-if="!isReset" id="notiBar" @click="handleGuest">
      <div class="icon"><i class="el-icon-user-solid"></i></div>
      <div class="msg">
        <div class="title">游客登录</div>
        <div class="info">游客请点击这里~</div>
      </div>
    </div>
  </div>
</template>
<script>
import ForgetPassword from "./account/forgetPassword.vue";
import Login from "./account/Login.vue";
import ResetPasword from "./account/resetPassword.vue";
export default {
  name: "login",
  components: {
    Login,
    ForgetPassword,
    ResetPasword,
  },
  data() {
    return {
      isLogin: true,
      isReset: false,
      token: "",
      bgUrl: "",
    };
  },
  created() {
    console.log(this.$route);
    var token = this.$route.query.token;
    var isFromReset = this.$route.redirectedFrom;
    // console.log("from", isFromReset);
    // console.log("token", token);
    // 判断是否是重置密码
    if (
      isFromReset != null &&
      isFromReset.startsWith("/resetPassword") &&
      token != null
    ) {
      this.token = token;
      this.isReset = true;
    }
  },
  mounted() {},
  methods: {
    handleGuest() {
      window.sessionStorage.setItem("isGuest", "1");
      this.$router.push("/welcome");
    },
    toLogin() {
      this.isLogin = true;
    },
    toForget() {
      this.isLogin = false;
    },
    toRegister() {
      this.$message({
        message: "功能暂未开放，学员账号由IT培优统一导入！",
        type: "info",
        showClose: true,
      });
      return;
      // this.isLogin = false;
    },
    // async getBingUrl(){
    //   const res = await this.$axios.get(`${this.HOST}/bing/HPImageArchive.aspx?format=js&idx=0&n=1`,{
    //     headers: {
    //       // ":authority": "cn.bing.com"
    //     }
    //   });
    //   console.log("res",res);
    //   if (res.status==200) {
    //     console.log("从Bing获取背景图成功！",res.config);
    //   } else {
    //     console.log("从Bing获取背景图失败，从本地加载备用背景图");
    //     this.bgUrl = "url('" + require("../assets/img/login_bg.jpg") + "')";
    //   }
    //   document.getElementById("container").style.backgroundSize = "100% 100%";
    //   document.getElementById("container").style.backgroundImage = this.bgUrl;
    // }
  },
};
</script>
<style lang="less" scoped>
#main {
  height: 100%;
  width: 100%;
}

#notiBar :hover {
  cursor: pointer;
}

#notiBar {
  position: fixed;
  right: 10px;
  top: 70px;
  height: 50px;
  width: 200px;
  background-color: rgba(227, 156, 236, 0.589) !important;
  color: rgb(255, 255, 255);
  border-color: rgba(247, 38, 247, 0.74);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.336);
  display: flex;

  .icon {
    font-size: 25px;
    width: 40px;
    color: white;
  }

  .msg {
    color: white;

    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .info {
      font-size: 14px;
      color: rgb(235, 235, 235);
    }
  }
}

#container {
  position: fixed;
  // background-image: url("http://area.sinaapp.com/bingImg/");
  background-image: url("../assets/img/login_bg.jpg");
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  z-index: 0;
  padding: auto;

  .logCard {
    position: relative;
    // top: 50%-33;
  }

  .head {
    position: fixed;
    display: flex;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: flex-end;
    z-index: 1;

    background-size: 100% 100%;
    background-image: url("../assets/img/bg.jpg");
    color: aliceblue;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);

    #ITLogo {
      position: fixed;
      top: 0px;
      left: 10px;
      width: auto;
      height: 60px;
      // margin-right: 30%;

      img {
        margin-top: 10px;
        width: 60px;
        height: 40px;
      }

      // span {
      //   font-size: 120%;
      //   margin-left: 5px;
      // }
      #title {
        position: fixed;
        top: 15px;
        left: 30%;
        width: 40%;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }
    }

    .button {
      font-size: 110%;
      font-weight: bold;
      width: 50px;
      height: 100%;
      line-height: 60px;
      border-style: none;
      cursor: pointer;
    }
    .button:hover {
      color: rgb(64, 128, 255);
      text-decoration: underline;
    }
    .logo {
      width: 100px;
      height: 100%;
    }
  }

  img {
    width: 100%;
    height: 500px;
  }
}
</style>
